<template>
  <div class="home-body-side">
    <div class="app-side-tabs el-tabs el-tabs--left el-tabs--card">
      <div v-for="tab in tabs" :key="tab.name" :class="['tab-item el-tabs__item is-left', { 'is-active': activeName === tab.name }]" @click="handleTabClick(tab)">
        {{ tab.label }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="app-side-tab-content">
      <VuePane v-if="activeName === 'vue'" />
      <div v-else-if="activeName === 'uniapp'">UniApp</div>
      <div v-else-if="activeName === 'h5'">H5</div>
    </div>
  </div>
</template>

<script setup>
import VuePane from './VuePane.vue'

const activeName = ref('vue')

const tabs = [
  { label: 'Vue', name: 'vue' },
  { label: 'React', name: 'react', href: 'http://react-admin.cn' },
  { label: 'UniApp', name: 'uniapp' },
  { label: 'H5', name: 'h5' },
  { label: 'LowCode', name: 'lowcode' },
  { label: 'Angular', name: 'angular', href: 'http://ng-admin.cn' },
]

const handleTabClick = (tab) => {
  if (tab.href) {
    window.open(tab.href)
    return
  }
  activeName.value = tab.name
}
</script>

<style lang="scss" scoped>
.home-body-side {
  width: 245px;
  min-height: 500px;
  position: fixed;
  top: 184px;
  left: 130px;
  display: flex;
  border: 1px solid var(--el-border-color-light);
  border-left: none;
  border-bottom: none;
  z-index: 5;
  .app-side-tabs {
    display: flex;
    border-right: none;
    margin-bottom: 20px;
    flex-direction: column;
    width: 100px;
  }

  .tab-item {
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.3s;
    height: 48px;
    line-height: 48px;
    &:hover {
      color: var(--el-color-primary);
    }
    &:last-child {
      border-bottom: 1px solid var(--el-border-color-light);
    }
  }

  .app-side-tab-content {
    border-left: 1px solid var(--el-border-color-light);
    border-bottom: 1px solid var(--el-border-color-light);
    margin-left: -1px;
    width: 70%;
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left.is-active:last-child {
    border-left: 1px solid var(--el-border-color-light);
    border-bottom: 1px solid var(--el-border-color-light);
  }
  .el-tabs--left.el-tabs--card .el-tabs__item.is-left {
    border-left: 1px solid var(--el-border-color-light);
    border-right: none;
  }
}
</style>
